<template>
	<view class="login-box">
		<!-- 顶部logo -->
		<view class="login-logo-box">
			<image class="login-logo" src="/static/login_logo.png" mode="aspectFit"></image>
			<text class="login-title">专业移动支付收款工具</text>
		</view>
		<!-- 登录表单 -->
		<view class="login-form-box">
			<view class="login-form-item">
				<image class="login-form-item-icon" src="/static/phone_icon.png" mode="aspectFit"></image>
				<input class="login-form-item-input" v-model="phone" type="digit" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="login-form-item">
				<image class="login-form-item-icon" src="/static/password_icon.png" mode="aspectFit"></image>
				<input class="login-form-item-input" v-model="password" password type="text" placeholder="请输入登录密码" />
			</view>
		</view>
		<!-- 忘记密码  -->
		<view class="forget-box">
			<view class="forget-btn" @tap="showForgetPwd">忘记密码?</view>
		</view>
		<!-- 登录按钮 -->
		<view class="login-btn" @tap="submitLogin">登录</view>
		<!-- 注册  -->
		<view class="register-box" @tap="showRegister">
			<text>没有账号？</text>
			<text>马上注册</text>
		</view>
		<!-- 其他登录方式 -->
		<view class="login-other-box">
			<view class="login-other-line"></view>
			<text class="login-other-text">其他登录方式</text>
			<view class="login-other-line"></view>
		</view>
		<view class="login-sms-box">
			<view class="login-sms-item" @tap="showSmsLogin">
				<image class="login-sms-icon" src="/static/login_sms.png" mode="aspectFit"></image>
				<text class="login-sms-text">短信</text>
			</view>
		</view>
		<!-- 协议 -->
		<view class="agreement-content">
			<xh-agreement :isSelect="isAgree" @agree="agreeAction"></xh-agreement>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import CryptoTool from '@/utils/crypto/jscrypto.js'
	import { userLogin } from '@/config/api.js'
	import { useUserStore, useFormStore } from '@/stores'

	const userStore = useUserStore()
	const formStore = useFormStore()
	//是否同意协议
	const isAgree = ref(false)
	//手机号
	const phone = ref('')
	//密码
	const password = ref('')
	//同意/不同意
	const agreeAction = (value) => {
		isAgree.value = value
	}
	// 登录
	const submitLogin = async () => {
		if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		} else if (uni.$u.test.isEmpty(password.value)) {
			uni.$tools.showToast('请输入登录密码')
			return
		} else if (!isAgree.value) {
			uni.$tools.showToast('请先阅读并同意相关协议')
			return
		}
		let params = {}
		params.password = CryptoTool.passwordEncrypt(password.value)
		params.phoneNumber = phone.value
		params.loginType = 6
		const res = await userLogin(params)
		formStore.$reset()
		userStore.user = res.result
		uni.setStorageSync('token', res.meta.accessToken)
		userStore.showAuth = true
		uni.switchTab({
			url:'/pages/home/home'
		})
	}
	// 验证码登录
	const showSmsLogin = () => {
		uni.navigateTo({
			url:'/pages/login/login-sms'
		})
	}
	// 注册
	const showRegister = ()=>{
		uni.navigateTo({
			url:'/pages/login/register'
		})
	}
	// 忘记密码
	const showForgetPwd = ()=>{
		uni.navigateTo({
			url:'/pages/login/forget-pwd'
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.login-box {
		.login-logo-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.login-logo {
				width: 180rpx;
				height: 180rpx;
				margin-top: 60rpx;
			}

			.login-title {
				color: $xh-color-606266;
				font-size: 28rpx;
				margin-top: 30rpx;
			}
		}

		.login-form-box {
			padding: 60rpx 60rpx 0;

			.login-form-item {
				display: flex;
				align-items: center;
				border: 1px solid $xh-theme-color;
				height: 90rpx;
				padding: 0 30rpx;
				border-radius: 45rpx;

				&:nth-child(1) {
					margin-bottom: 40rpx;
				}

				.login-form-item-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.login-form-item-input {
					flex: 1;
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}
		}

		.forget-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 60rpx;
			font-size: 26rpx;

			.forget-btn {
				height: 60rpx;
				line-height: 60rpx;
				color: $xh-subtitle-color;
			}
		}

		.login-btn {
			margin: 0 60rpx;
			background-color: $xh-theme-color;
			color: white;
			font-size: 32rpx;
			font-weight: 500;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 45rpx;
			margin-top: 40rpx;
		}
		.register-box{
			display: flex;
			align-items: center;
			justify-content: center;
			color: $xh-title-color;
			font-size: 26rpx;
			margin-top: 20rpx;
			text:nth-of-type(2){
				color: $xh-theme-color;
				font-weight: 500;
				padding: 20rpx 0;
			}
		}
		.login-other-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			padding: 0 60rpx;

			.login-other-line {
				flex: 1;
				background-color: #eeeeee;
				height: 1px;
				transform: translateY(0.5);
			}

			.login-other-text {
				color: $xh-subtitle-color;
				font-size: 26rpx;
				margin: 0 30rpx;
			}
		}

		.login-sms-box {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 50rpx;

			.login-sms-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.login-sms-icon {
					width: 64rpx;
					height: 64rpx;
				}

				.login-sms-text {
					color: $xh-color-606266;
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}
		}

		.agreement-content {
			box-sizing: border-box;
			padding: 40rpx 30rpx;
		}
	}
</style>